<template>
	<div class="lhc-list">
		<!-- <div class="flex justify-center items-center"> -->
		<!-- <el-radio-group v-model="tabActive">
        <el-radio-button v-for="(item, i) in names" :label="item.name" :value="i" />
      </el-radio-group> -->
		<!-- </div> -->
		<div class=" flex justify-center py-[10px] ">
			<ActionSelect class="!w-full" ref="actionSelect" v-model:val="tabActive" :columns="names" />
		</div>

		<!-- <div ><custom-tabs v-model:value="tabActive" :options="names" /></div> -->

		<!-- <div class="border-t-[1px] border-t-[#E4E4E4] border-solid px-[15px] "> -->
		<!-- <el-scrollbar always ref="scrollbarRef" class="h-full w-full overflow-hidden"> -->
		<!-- <div class="grid grid-flow-col gap-x-[5px]"> -->
		<div class="border-t-[1px] border-t-[#E4E4E4] border-solid px-[15px]"
			v-for="(item, i) in arrList[tabActive]?.list || []" :key="i">
			<div
				class="text-[#888888] h-[44.5px] text-[14px] flex items-center justify-center  border-b-[1px] border-b-[#E4E4E4] border-solid ">
				{{ item.name }}
			</div>
			<div class="py-[15px]  flex flex-wrap gap-y-[15px] gap-x-[8px]">
				<div class="w-[calc(25%_-6px)] flex justify-between items-center gap-[5px]" v-for="(jtem, j) in item.arr" :key="j">
					<div class="w-[30px] flex justify-center items-center text-center" :class="{
						'text-red': jtem.Key.includes('红波'),
						'text-green': jtem.Key.includes('绿波'),
						'text-blue': jtem.Key.includes('蓝波')
					}">
						<template v-if="!isNaN(jtem.Key as any)">
							<lhcBall type="large" :num="Number(jtem.Key)"></lhcBall>
						</template>
						<template v-else>
							{{ jtem.Key }}
						</template>
					</div>
					<div class="flex-1 h-[22px] bg-[#FBFBFD] rounded-[5px] border-[1px] border-[#E4E4E4] border-solid flex items-center justify-center"
						:class="{
							active: jtem.Val > 0
						}">
						{{ jtem.Val }}
					</div>
				</div>
			</div>

			<!-- </div> -->
			<!-- </div> -->
			<!-- </el-scrollbar> -->
		</div>
	</div>
</template>
<script setup lang="ts">
import lhcBall from "@/components/ball/lhc-ball.vue";
// import { ElScrollbar } from "element-plus";
import { cloneDeep } from "lodash-es";

const props = withDefaults(
	defineProps<{
		list: MonitorMoTableList;
	}>(),
	{}
);
const names = [
	{ name: "特码", arr: ["特码", "特码-两面", "特码头数", "特码尾数"] },
	{ name: "正码", arr: ["正码", "正码一", "正码二", "正码三", "正码四", "正码五", "正码六"] },
	{ name: "正码特", arr: ["正一特", "正二特", "正三特", "正四特", "正五特", "正六特"] },
	{ name: "色波", arr: ["红波", "绿波", "蓝波", "半波", "半半波"] },
	{ name: "一肖尾数", arr: ["一肖", "尾数"] },
	{ name: "连码", arr: ["二中二", "三中二", "三中三", "特串"] },
	{ name: "连肖", arr: ["二肖", "三肖", "四肖", "五肖"] },
	{ name: "其他", arr: ["正肖", "总肖", "十二生肖", "五行", "两面"] }
].map((a, i) => ({ ...a, text: a.name, value: i }));
const scrollbarRef = ref();

const tabActive = ref(0);
const arrList = ref<{ name: string; list: MonitorMoTableList }[]>([]);
watch(
	() => props.list,
	val => {
		arrList.value = cloneDeep([]);
		for (let i = 0; i < names.length; i++) {
			let list: MonitorMoTableList = [];
			for (let j = 0; j < names[i].arr.length; j++) {
				const cur = val.find(item => item.name === names[i].arr[j]);
				if (cur) {
					list.push(cur);
				}
			}
			arrList.value.push({ name: names[i].name, list: list });
		}
		scrollbarRef.value?.setScrollTop(0);
	}
);
watch(
	() => tabActive.value,
	() => {
		scrollbarRef.value?.setScrollTop(0);
	}
);
</script>
<style lang="scss" scoped>
.active {
	:deep() {
		.el-input {
			--el-input-bg-color: #dff7ff;
		}
	}
}

:deep() {
	.el-input__inner {
		text-align: center;
	}
}
</style>
